<template>
  <a-modal
    :destroy-on-close="true"
    :mask-closable="false"
    title="应用管理编辑"
    :open="visible"
    :onCancel="onCancel"
    :width="800"
  >
    <template #footer>
      <a-button key="back" @click="() => onCancel()">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="onSubmitLoading"
        @click="onFinish"
        >提交</a-button
      >
    </template>
    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="组件编码" v-bind="validateInfos.code">
            <a-input v-model:value="modelRef.code" placeholder="请输入编码" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="组件名称" v-bind="validateInfos.name">
            <a-input v-model:value="modelRef.name" placeholder="请输入名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="默认页面">
            <a-input
              v-model:value="modelRef.defaultPath"
              placeholder="请输入默认页面"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="地址">
            <a-input
              v-model:value="modelRef.url"
              placeholder="请输入默认页面"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="缩略图">
            <a-upload
              v-model:file-list="fileList"
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              action=""
              :show-upload-list="false"
              :before-upload="beforeUpload"
              :auto-upload="false"
            >
              <img
                v-if="imageUrl"
                :width="102"
                :height="102"
                :src="imageUrl"
                alt="avatar"
              />
              <div v-else>
                <plus-outlined></plus-outlined>
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="启用状态">
            <a-switch
              v-model:checked="modelRef.enableStatus"
              checked-children="ON"
              un-checked-children="OFF"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive, Ref, ref } from "vue";
import { useI18n } from "vue-i18n";
import { message, Form } from "ant-design-vue";
import { validateInfos } from "ant-design-vue/lib/form/useForm";
const useForm = Form.useForm;
import { TableListItem } from "../data.d";
import { PlusOutlined } from "@ant-design/icons-vue";
import { uploadFile } from "@/utils/FileUpload";

interface UpdateFormSetupData {
  modelRef: Omit<TableListItem, "id">;
  validateInfos: validateInfos;
  onFinish: () => Promise<void>;
  beforeUpload: (file: any) => Promise<void>;
  imageUrl: Ref<string>;
  fileList: Ref<[]>;
}
export default defineComponent({
  name: "CreateForm",
  components: {
    PlusOutlined,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    values: {
      type: Object as PropType<Partial<TableListItem>>,
      required: true,
    },
    onCancel: {
      type: Function,
      required: true,
    },
    onSubmitLoading: {
      type: Boolean,
      required: true,
    },
    onSubmit: {
      type: Function as PropType<(values: TableListItem) => void>,
      required: true,
    },
  },
  setup(props): UpdateFormSetupData {
    const { t } = useI18n();
    // 表单值
    let modelRef = reactive<TableListItem>({
      id: props.values.id || 0,
      code: props.values.code || "",
      name: props.values.name || "",
      url: props.values.url || "",
      img: props.values.img || "",
      appId: props.values.appId || 0,
      fileId: props.values.fileId || "",
      defaultPath: props.values.defaultPath || "",
      enableStatus: props.values.enableStatus === "1" ? true : false,
    });
    // 表单验证
    const rulesRef = reactive({
      code: [
        {
          required: true,
          message: "编码不能为空",
        },
      ],
      name: [
        {
          required: true,
          message: "名称不能为空",
        },
      ],
    });

    // 获取表单内容
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    // 提交
    const onFinish = async () => {
      try {
        const fieldsValue = await validate<Omit<TableListItem, "id">>();
        modelRef.enableStatus = modelRef.enableStatus ? "1" : "0";
        modelRef.img = imageUrl.value;
        props.onSubmit(modelRef);
      } catch (error) {
        message.warning(t("app.global.form.validatefields.catch"));
      }
    };
    const fileList = ref<any>([]);
    const beforeUpload = async (file: any) => {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("appId", modelRef.appId + "");
      const res = await uploadFile(formData);
      if (res.data.success) {
        imageUrl.value = res.data.data.extUrl;
        modelRef.fileId = res.data.data.fileId;
        modelRef.img = res.data.data.data.url;
      }
      return Promise.reject();
    };
    const imageUrl = ref(props.values.img ? props.values.img : "");
    return {
      modelRef,
      validateInfos,
      onFinish,
      beforeUpload,
      fileList,
      imageUrl,
    };
  },
});
</script>
